<template>
    <div class="app-container">
        <levelbar></levelbar>
        <div class="form-box">
            <div class="form-title">修改员工信息</div>
            <el-form label-width="100px" class="app-content form" :rules="rules" :model="ruleForm" ref="ruleForm">
                <div class="form-item">
                    <div class="form-item-title">
                        <span class="title-level">基础信息</span>
                    </div>
                    <div class="form-content">
                        <el-row :gutter="21">
                            <el-col :span="12">
                                <el-form-item label="姓名" prop="userName">
                                    <el-popover placement="top-start" trigger="focus" content="字符长度不大于20个">
                                        <el-input v-model="ruleForm.userName" :disabled="ruleForm.newType" placeholder="请输入名字" :maxlength="20" slot="reference" style="width:95%"></el-input>
                                    </el-popover>        
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="角色" prop="roleId">
                                    <el-select v-model="ruleForm.roleId" :disabled="ruleForm.newType" placeholder="请选择" style="width:95%">
                                        <el-option v-for="item in ruleForm.dataType"  :key="item.pId" :label="item.sName" :value="item.pId"> </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                    <div class="form-item-title">
                        <span class="title-level">负责区域</span>
                    </div>
                    <div class="form-content">
                        <el-row v-for="(site,index) in ruleForm.dataAgent" :gutter="21" :key="site.key" ref='addSchoolLeader'>
                            <el-col :span="7">
                                <el-form-item label="所选省：" :prop="'dataAgent[' + index + '].fProvinceId'" :rules="{required: true, message: '所选省不能为空', trigger: 'change'}">
                                    <province @change="areaChange(site, index)" :disabledOptions="site.disabledPid" :emptyOption="false" v-model="site.fProvinceId" ></province>
                                </el-form-item>
                            </el-col>
                            <el-col :span="7"  :offset="1">
                                <el-form-item label="所选市：">
                                    <city @change="areaChange(site, index)" :disabledOptions="site.disabledCid" :emptyOption="false" v-model="site.fCityId" :province="site.fProvinceId"></city>
                                </el-form-item>
                            </el-col>
                            <el-col :span="7">
                                <el-form-item label="所选区县：">
                                    <region @change="areaChange(site, index)" :disabledOptions="site.disabledAid" :emptyOption="false" v-model="site.fAreaId" :city="site.fCityId"></region>
                                </el-form-item>
                            </el-col>
                            <div class="delBtn"><i class="el-icon-delete" @click.prevent="removeDomain(index)" v-if='index != 0'></i></div>
                        </el-row>    
                        <div style="margin-left:25px" v-if="!ruleForm.newType">
                            <el-button type="text" @click="addArea" class="addBtn"><i class="el-icon-plus"></i>继续添加</el-button>    
                        </div>
                        <div style="margin-left:25px" v-else>全国</div>
                    </div>
                    <div class="form-item">
                        <el-form-item class="footer">
                            <el-button @click="resetForm">取消</el-button>
                            <el-button type="primary"  v-if="!ruleForm.newType"  @click="submitForm('ruleForm')" :loading="loadingBtn">确认</el-button>
                        </el-form-item>
                    </div>
                </div>
            </el-form>
        </div>
    </div>
</template>
 
<script>

import Levelbar from '../layout/Levelbar';
import { modifyCompanyStaff, findAgentAreaByOrgUserId, findSysRoles} from 'api/staffManagement';
import { mapGetters } from 'vuex';
import province from 'components/CascadeRegiones/province';
import city from 'components/CascadeRegiones/city';
import region from 'components/CascadeRegiones/region';
export default{
    name: 'modifyStaff',
    components: {Levelbar, province, city, region},
    data() {
        return {
            ruleForm: {
                isProvice: '',
                dataType: [],
                roleId: '',
                newType: false,
                userName: '',
                findCity: [],
                findArea: [],
                province: [],
                dataAgent: [
          
                ],
                deleteData: []
            },
            loadingBtn: false,
            rules: {
                userName: [
                    {required: true, message: '请填写姓名', trigger: 'blur'},
                    { pattern: /^[^ ]+$/, message: '请勿输入空格', trigger: 'change'}  
                ],
                roleId: [
                    { required: true, message: '请选择角色', trigger: 'change' },
                    { pattern: /^[^ ]+$/, message: '请勿输入空格', trigger: 'change'}  
                ]
            }
        }
    },
    created() {
        // this.searchProvice();
        this.getType();
        this.searchInfo();
        this.getroleType();
    },
    computed: {
        ...mapGetters([
            'uid'
        ])
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$confirm('确定要提交吗?', ' ', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消'
                    }).then(() => {
                        let orgUserRegionMaps = this.ruleForm.dataAgent;
                        for (let i=0;i<orgUserRegionMaps.length;i++) {// 遍历数组将里面的多余两个数据删除
                            delete orgUserRegionMaps[i].findArea;
                            delete orgUserRegionMaps[i].findCity;
                        }
                        this.loadingBtn = true;
                        modifyCompanyStaff(
                            this.$route.params.orgUserId,
                            this.ruleForm.userName,
                            this.ruleForm.roleId,
                            this.ruleForm.deleteData,
                            orgUserRegionMaps
                        ).then(response => {
                            this.$message({
                                type: 'success',
                                message: '修改员工信息成功'
                            })
                            this.loadingBtn = false;
                            this.$store.dispatch('UpdateCache', true);// 修改 和查看
                            this.$router.push({path: '/staffManagement'});
                        });
                    }).catch(() => {
                        this.loadingBtn = false;
                        this.$message.info('已取消');
                    });
                } else {
                    return false;
                }
            });
        },
    // 查询修改信息
        searchInfo() {
            this.ruleForm.userName = this.$route.params.userName;
            this.ruleForm.roleId=this.$route.params.roleId;
            findAgentAreaByOrgUserId(this.$route.params.orgUserId).then(response => {
                response.data.content.forEach(item => {
                    let area = this.addArea();
                    area.fProvinceId = item.fProvinceId;
                    area.fCityId = item.fCityId;
                    area.fAreaId = item.fAreaId;
                    area.pId = item.pId;
                });
            });
        },
       
        getType() {
            if (this.$route.params.orgUserId == '408280452147720192') {
                this.ruleForm.newType = true;
            } else {
                this.ruleForm.newType = false;
            }
        },

    // 角色查询
        getroleType() {
            findSysRoles('2', '0').then(response => {
                let roleId = response.data.content;
                let select = {
                    sName: '请选择',
                    pId: ''
                }
                roleId.unshift(select);
                this.ruleForm.dataType = roleId;
            });
        },
     // 省市区选择
        // searchProvice() {},
        changeProvice(provinceId, index) {
            this.ruleForm.dataAgent[index].findCity = [];
            this.ruleForm.dataAgent[index].findArea = [];
            this.ruleForm.dataAgent[index].fCityId = '';
            this.ruleForm.dataAgent[index].fAreaId = '';
        },
        changeCityId(cityId, index) {
            this.ruleForm.dataAgent[index].findArea = [];
            this.ruleForm.dataAgent[index].fAreaId = '';
        },
    // 删除添加的省市区    
        removeDomain(index) {
            let pId = this.ruleForm.dataAgent[index].pId;
            if (pId) this.ruleForm.deleteData.push(pId);// 将被删除区域的pId保留下来，组成数组作为参数delOrgUserRegionMaps
            this.ruleForm.dataAgent.splice(index, 1);
        },
    // 添加省市区

        // 添加负责区域
        addArea() {
            if (this.ruleForm.dataAgent.length >= 50) {
                this.$message({
                    message: '最多只能添加50个负责区域！'
                })
                return;
            }
            let area = {
                fProvinceId: null,
                fCityId: null,
                fAreaId: null,
                disabledPid: [],
                disabledCid: [],
                disabledAid: [],
                findCity: [],
                findArea: []
            };
            area.disabledPid.length = this.ruleForm.dataAgent.length;
            area.disabledCid.length = this.ruleForm.dataAgent.length;
            area.disabledAid.length = this.ruleForm.dataAgent.length;

            this.ruleForm.dataAgent.forEach((item, index) => {
                if (item.fAreaId) {
                    area.disabledAid.splice(index, 1, item.fAreaId);
                } else if (item.fCityId) {
                    area.disabledCid.splice(index, 1, item.fCityId);
                } else if (item.fProvinceId) {
                    area.disabledPid.splice(index, 1, item.fProvinceId);
                }
            });
            this.ruleForm.dataAgent.push(area);

            return area;
        },
        areaChange(row, index) {
            this.ruleForm.dataAgent.forEach((item, i) => {
                if (i !== index) {
                    item.disabledAid.length = this.ruleForm.dataAgent.length;
                    item.disabledCid.length = this.ruleForm.dataAgent.length;
                    item.disabledPid.length = this.ruleForm.dataAgent.length;

                    if (row.fAreaId) {
                        item.disabledAid.splice(index, 1, row.fAreaId);
                        item.disabledCid.splice(index, 1, null);
                        item.disabledPid.splice(index, 1, null);
                    } else if (row.fCityId) {
                        item.disabledAid.splice(index, 1, null);
                        item.disabledCid.splice(index, 1, row.fCityId);
                        item.disabledPid.splice(index, 1, null);
                    } else if (row.fProvinceId) {
                        item.disabledAid.splice(index, 1, null);
                        item.disabledCid.splice(index, 1, null);
                        item.disabledPid.splice(index, 1, row.fProvinceId);
                    } else {
                        item.disabledAid.splice(index, 1, null);
                        item.disabledCid.splice(index, 1, null);
                        item.disabledPid.splice(index, 1, null);
                    }
                }
            });
        },
    // 跳转
        resetForm() {
            this.$router.push({path: '/staffManagement'});  
        }  
    
    }
}
</script>
 
<style lang="scss" scoped>
.app-container {
  position: relative;
  padding: 20px 20px 10px;
  $bgcolor: #fff;

  @mixin showTitle() {
    background: $bgcolor;
    box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
  }
  .form-box {
    padding: 0 50px;
    @include showTitle();
    .form-title {
      padding-top:8px;
      text-align: center;
      font-size: 18px;
      color: #333;
      line-height: 72px;
      font-weight: bold;
      font-family: Microsoft YaHei;
      border-bottom: 1px solid #ddd;
    }
    .form {
      .form-item {
        padding-bottom: 40px;
        .form-item-title {
            margin: 40px 0;
            font-size: 14px;
            color: #333;
            line-height: 14px;
            border-left: 4px solid #ff5e2c;
            text-indent: 16px;
           
          .note-css {
            vertical-align: middle;
            display: inline-block;
            width: 4px;
            height: 14px;
            margin-right: 26px;
            border-left: 3px solid #ff5e2c;
          }
          
        }
        .warn-infor{
            font-size: 14px;
            color: #333;
        }
        .delBtn {
            display: inline-block;
            height: 36px;
            width: 16px;
            color:#999;
            line-height: 38px;
            margin-left:25px;
            i {
                cursor: pointer;
            }
        }
        .addBtn{
            margin-left:74px;
            font-size:14px;
            color:#ff5e2c;
        }
        .footer {
          //float: right;
          text-align: center;
          margin-top: 40px;
        }
      }
    }
  }
}
</style>